<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      section {
        width: 100px;
        height: 200px;
        background-color: blue;
        transition: 2s;

        transform-origin: -50px -50px;
      }
      div:hover section {
        /* transform: scaleX(0.5); */
        /* transform: scaleY(2); */
        transform: scale(2, 2);
      }
    </style>
  </head>
  <body>
    <div>
      <section>哈哈</section>
    </div>
  </body>
</html>

<!-- 
  含义 : 通过平面上面的缩放函数, 来实现元素的缩小和放大 

  ​	基本语法 : transform : scaleX()  /  scaleY()  /  scale()

  ​	释义 : 

  ​		scaleX() : 元素沿着X轴进行缩小放大 : 取值+为x轴方向放大 , 取值-为x轴方向缩小

  ​		scaleY() : 元素沿着Y轴进行缩小放大 : 取值+为y轴方向放大 , 取值-为y轴方向缩小

  ​		scale() : 元素沿着中心点进行缩小放大 , 取值为一个值的时候, 代表了水平和垂直两个方向, 取值为两个值的时候, 第一个值代表的水平方向, 第二个值代表的是垂直方向;
 -->
